<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable :columns="columns" :requestApi="getRoomList" :init-param="initParam" :pagination="false">
        <template #tableHeader>
          <el-button type="primary" @click="go('OperaRoom', undefined)">新增户型</el-button>
          <el-button type="danger">批量删除</el-button>
        </template>
        <template #cover="{ row }">
          <el-image class="w-90px h-90px" fit="scale-down" :src="row.cover"></el-image>
        </template>
        <template #grounding="{ row }">
          <el-tag type="success" v-if="row.grounding">上架</el-tag>
          <el-tag type="danger" v-if="!row.grounding">下架</el-tag>
        </template>
        <template #referencePrice="{ row }">{{ row.referencePrice }}元/m²</template>
        <template #area="{ row }"> {{ row.area }}m² </template>
        <template #update_time="{ row }">
          {{ dayjs(row.update_time).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template #opera="{ row }">
          <el-button type="primary" :icon="EditPen" link @click="go('OperaRoom', row.id)">编辑</el-button>
          <el-button type="primary" :icon="Delete" link>删除</el-button>
          <el-button type="primary" :icon="Tools" link @click="album(row.id)">相册</el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { EditPen, Delete, Tools } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useRouter, useRoute } from "vue-router";
import { getRoomList } from "@/api/modules/room";
import { reactive } from "vue";
import dayjs from "dayjs";

const router = useRouter();
const route = useRoute();

const initParam = reactive({ pageNum: 1, pageSize: 10, loupanId: route.query.id });

const columns: ColumnProps[] = [
  { prop: "sort", label: "排序值" },
  { prop: "name", label: "户型" },
  { prop: "referencePrice", label: "参考价" },
  { prop: "area", label: "面积" },
  { prop: "roomType", label: "户型", isShow: false, search: { el: "select" } },
  { prop: "cover", label: "封面", width: 120 },
  { prop: "grounding", label: "是否上架" },
  { prop: "update_time", label: "更新时间" },
  { prop: "opera", label: "操作", width: 250 }
];

const go = (name: string, roomId: any) => {
  router.push({ name, query: { id: route.query.id, roomId } });
};

const album = (id: any) => {
  router.push({ name: "RoomSwiper", query: { roomId: id, id: route.query.id } });
};
</script>

<style></style>
